<template>
  <div class="addressed">
    <!-- 头部标题 -->
    <div class="header">
      <div>
        <a href="javascript:history.go(-1)"
          ><img id="back" src="img/返回.png" alt=""
        /></a>
      </div>
      <span>编辑收货地址</span>
    </div>
    <!-- 信息 -->
    <div class="information">
      <ul>
        <li>
          <span>收货人</span
          ><input type="text" name="" id="" placeholder="收货人" v-model="user"/>
        </li>
        <li>
          <span>手机号码</span
          ><input type="text" name="" id="" placeholder="手机号码" v-model="phone"/>
        </li>
        <li>     
            <span class="left">所在地区</span>
          <div class="right r">
            <div class="city" @click="toAddress">{{ city }}</div>
            <i class="arrow-r"> </i>
             <v-distpicker class="select" type="mobile" @selected="selected" v-show="addInp">
          </v-distpicker>
          </div>
          <div class="mask" v-show="mask"></div>
        </li>
        <li>
          <span>详细地址</span>
          <input type="text" placeholder="详细地址" v-model="detaileAddresses">
        </li>
        <li>
            <span>设为默认</span>
            <img src="../../public/img/checkno.png" alt="" v-if="show" @click="img">
            <img src="../../public/img/checkon.png" alt="" v-if="!show" @click="img">
        </li>
        <li>
            <div class="delete" >
                <span  > 删除收货地址</span>
            </div>
        </li>
      </ul>
    </div>  
    <!-- 保存 -->
    <div class="save">
        <span @click="saved">保存</span>
    </div>
    <!-- 提示 -->
    <div class="ts" v-bind:style="{ display: blockNone }">
      {{ msg }}
    </div>
  </div>
</template>
<style  scoped>
.information ul li .delete span{
  width: 40%;
  color: red;
  font-size: 14px;
  margin-top: 0;
}
/* 保存 */
.save{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.save span{
    width: 90%;
    height: 40px;
    background:#FE5900;
    font-size: 14px;
    color: #fff;
    text-align: center;
    line-height: 40px;
    border-radius: 20px;
}
/*  */
.addressed {
  width: 100%;
  background: #f6f6f6;
  box-sizing: border-box;
}
/* 头部登录标题 */
.header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 1.173333rem;
  line-height: 1.173333rem;
  background-color: white;
  text-align: center;
}
.header span {
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}

.header div {
  position: absolute;
  left: 0;
  top: 0;
  margin-left: 5px;
}
.header div img {
  width: 0.533333rem;
}
.header a {
  font-size: 0.373333rem;
  color: #aaa;
}
/* 收货人信息 */
.information {
  width: 100%;
  margin-top: 60px;
}
.information ul {
  width: 100%;
  list-style: none;
  background: #fff;
  margin-top: 10px;
}
.information ul li {
  width: 100%;
  height: 44px;
  margin-bottom: 10px;
  border-bottom: 1px solid #aaa;
  padding-left: 2%;
}
.information ul li span {
  display: inline-block;
  width: 22%;
  font-size: 14px;
}
.information ul li input {
  width: 78%;
  height: 100%;
  outline: none;
  border: 1px solid transparent;
  font-weight: 500;
  font-size: 14px;
}
.information ul li:nth-child(3){
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.left{
    width: 22%;
}
.left span{
    display: inline-block;
    width: 100%;
}
.right{
    width: 78%;
}
.city{
    font-size: 14px;
    font-weight: 500;
}
.select{
    position: absolute;
    overflow: scroll;
    height: 290px;
}
.information ul li:nth-child(5){
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.information ul li:nth-child(5) img{
    zoom: 0.8;
    margin-right: 10%;
}
/* 弹出框 */
.ts {
  position: fixed;
  left: 50%;
  top:50%;
  width: 3.733333rem;
  height: 0.8rem;
  transform: translate(-50%, -50%);
  border: 1px solid transparent;
  border-radius: 0.666667rem;
  text-align: center;
  line-height: 30px;
  color: red;
  font-weight: bold;
  background: rgba(0, 0, 0, 0.253);
  font-size: 0.373333rem;
}
</style>
<script>
import VDistpicker from "v-distpicker";
export default {
  name: "addressed",
  data() {
    return {
      id:"",
      /*  */
      blockNone:"none", //弹框显示隐藏
      msg:"",          //弹框提示信息
      user:"",    //收货人
      phone:'',   //手机号
      detaileAddresses:"",  //详细地址
      show:true,  //默认勾选图片更换
      /* 地址 */
      city: "请选择",
      addInp: false,
      mask: false,
      select:false,  //是否选择了地址
      array:[]       //收货地址所有信息
    };
  },
  components: { VDistpicker },
  methods: {
    //图片勾选
      img(){
          this.show=!this.show
      },
      /*  */
    toAddress() {
      this.mask = true;
      this.addInp = true;
    },
    // 省市区三级联动
    selected(data) {
      this.mask = false;
      this.addInp = false;
      this.city =
        data.province.value + " " + data.city.value + " " + data.area.value;
      this.select=true;
      //console.log(this.city);
    },
    //保存
    saved(){
        console.log(this.user)
        console.log(this.phone)
        console.log(this.city)
        if(this.user==''||this.phone==''||this.select==false||this.detaileAddresses==''){
          this.blockNone = "block";
          this.msg="信息必须填完整"
          setTimeout(() => {
              this.blockNone = "none";                          
          }, 2000);
        }else{
          var reg2=/^1[3-9]\d{9}$/ig;
          if(!reg2.test(this.phone)){
              this.blockNone = "block";
              this.msg="手机号格式不正确"
              setTimeout(() => {
                  this.blockNone = "none";                          
              }, 2000);
          }else{
            var obj={
              num:2,   //表示编辑修改
              id:this.id,
              username:this.user,
              phone:this.phone,
              address:this.city,
              detaileAddress:this.detaileAddresses,
              default:!this.show
            }
            //console.log(obj)
            //console.log(obj.id);
             //拿到当前用户名
            var name=localStorage.getItem("user");
            //拿到当前存在本地的用户地址信息
           /*  var arr=JSON.parse(localStorage.getItem("address"));
            if(obj.default){  //如果当前设为默认地址
              arr.some((item,index)=>{ //所有改为全不默认
                item.default=false;
              })
            }
            arr.push(obj);   //将当前信息添加进去
            localStorage.setItem("address", JSON.stringify(arr)); */
            this.$axios.post('http://118.178.184.210:3000/address',{name:name,obj:obj}).then((data)=>{
                console.log(data);
                if(data.status==200){
                    if(data.data.code==200){
                      console.log(data.data.msg);     
                      //var arr=data.data.address;  
                      //localStorage.setItem("address", JSON.stringify(arr));  //添加新地址到数据库后添加到本地
                    }
                }						
		            }).catch(function(err){
			              console.log(err);
                })
                //this.$router.replace({ path: "/my" }); //进入我的页面
          }
        }
    }
  },
  mounted: function () {
    const arrEdit=this.$store.state.arr;
    //console.log(arrEdit[0].address)
    this.user=arrEdit[0].username;
    this.phone=arrEdit[0].phone;
    this.detaileAddresses=arrEdit[0].detaileAddress;
    this.show=!arrEdit[0].default;
    this.id=arrEdit[0]._id;

  },
};
</script>